<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form id="myform">
        <p>
            姓名：
            <input type="text" name="nameField">
        </p>
        <p>
            年龄：
            <input type="text" name="ageField">
        </p>
        <p>
            <input type="submit">
        </p>
    </form>

    <script>
        var myform = document.getElementById('myform');
        var nameField = myform.nameField;
        var ageField = myform.ageField;

        // 当姓名表单里的值已经被修改完了才会触发
        nameField.onchange = function() {
            console.log('你已经修改完了姓名');
        };

        // 只要修改表单里的值就会触发 实时
        nameField.oninput = function() {
            console.log('你正在修改姓名');
        };

        // 得到焦点 当鼠标点击该表单或tab该表单时触发
        nameField.onfocus = function() {
            console.log('姓名框已经得到了焦点');
        };

        // 失去焦点
        nameField.onblur = function() {
            console.log('姓名框已经失去了焦点');
        };

        // 当表单被提交时才会触发
        myform.onsubmit = function() {
            alert('你正在尝试提交表单');
        };
    </script>
</body>

</html>